<template>
	<view class="container">
		<!-- 头部 -->
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }"
			 @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<!-- 显示区域 -->
		<view class="content" v-if="list.length == 0">
			<image src="/static/images/shop/empty.png" mode=""></image>
			<text>亲,暂无提现记录哦</text>
		</view>
		<view v-else>
			<view class="detail" v-for="(item,index1) in list" :key='index1'>
				<view>
					<view>提现{{ item.money }}元</view>
					<view>{{ item.createtime }}</view>
				</view>
				<view>
					{{ item.state_text }}
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
						state: 0,
						text: '全部'
					},
					{
						state: 1,
						text: '审核中'
					},
					{
						state: 2,
						text: '审核通过'
					},
					{
						state: 3,
						text: '已打款'
					},
					{
						state: 4,
						text: '驳回'
					}
				],
				page: 1,
				limit: 15,
				list: [],
				total: 0, // 总数
			};
		},

		onLoad(options) {
			// 页面显示是默认选中第一个
			this.tabCurrentIndex = 0;
			// this.init()
		},

		methods: {
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.page = 1;
				this.list = [];
				this.init();
			},
			// 提现明细
			init() {
				var that = this;
				var data = {
					state: this.navList[this.tabCurrentIndex].state,
					page: this.page,
					limit: this.limit
				}
				data.token = uni.getStorageSync('token');
				postInfoCashList(data).then(res => {
					uni.hideLoading()
					if(res.data.code == 1) {
						var list = res.data.data.data;
						list.forEach(item => {
							that.list.push(item)
						})
						that.total = res.data.data.total;
					}
				})
			}
		},
		// 页面上拉触底
		onReachBottom() {
			uni.showLoading({title: "加载中"})
			if(this.list.length < Number(this.total)) {
				this.page ++
				this.init()
			} else {
				uni.hideLoading();
				this.$api.msg('已经到底了');
			}
		}
	};
</script>

<style scoped lang="scss">
	page,
	.container {
		background: $page-color-base;
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: #666666;
			position: relative;

			&.current {
				color: #FC6B00;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 100%;
					height: 0;
					border-bottom: 2px solid #FC6B00;
				}
			}
		}
	}
	
	.content{
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			width: 218upx;
			height: 120upx;
			margin: 100upx 0 30upx;
		}
		text{
			font-size: 28upx;
			color: #999999;
		}
	}
	
	.list {
		padding: 0 30upx;
		background-color: #fff;
		// margin-top: 30upx;

		.detail {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			border-bottom: 1upx solid #EBE7E7;

			font-size: 32upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
		}

		:last-child {
			border: none;
		}
	}
	.detail {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
	}
</style>
